<template>
  <div>
    <!-- banner -->
    <div class="message-banner" :style="cover">
      <!-- 弹幕输入框 -->
      <div class="message-container">
        <h1 class="message-title">留言板</h1>
        <div class="message-input-wrapper">
          <el-input class="input" v-model="content" placeholder="说点什么吧" @keyup.enter.native="addToList"
            @focus="show = true"></el-input>
          <el-button style="opacity: .6;" class="ml-3" round @click="addToList" v-show="show">发送</el-button>
        </div>
      </div>
      <!-- 弹幕列表 -->
      <div class="barrage-container">
        <vue-danmaku
          ref="danmaku"
          class="danmaku"
          :danmus="barrageList"
          style="height: 100%; width: 100%"
          useSlot
          :speeds="120"
          :channels="12"
          :loop="true"
          :debounce="90"  
          :useWebAnimation="true" 
          :randomChannel="true" 
        >
          <template v-slot:dm="{ danmu }">
            <span class="barrage-items">
              <img
                :src="danmu.avatar"
                width="30"
                height="30"
                style="border-radius: 50%"
                loading="lazy"
              />
              {{ danmu.nickname }}:{{ danmu.content }}</span
            >
          </template>
        </vue-danmaku>
      </div>
    </div>
  </div>
</template>

<script>
import { getMessagesApi, addMessageApi } from "@/api/message";
import VueDanmaku from 'vue-danmaku';
import backgroundImage from '@/assets/images/kingcola-backgd.png';

export default {
  components: {
    VueDanmaku
  },

  data() {
    return {
      show: false,
      content: "",
      count: null,
      timer: null,
      barrageList: [],
      user: this.$store.state.userInfo,
    };
  },
  mounted() {
    this.listMessage();
    // 添加延时确保弹幕组件初始化完成
    /* setTimeout(() => {
      if (this.barrageList.length > 0) {
        // 强制更新弹幕列表
        const tempList = [...this.barrageList];
        this.barrageList = [];
        setTimeout(() => {
          this.barrageList = tempList;
        }, 100);
      }
    }, 500); */
    // 优化弹幕初始化
    this.$nextTick(() => {
      setTimeout(() => {
        if (this.barrageList.length > 0) {
          // 分批加载弹幕
          const tempList = [...this.barrageList];
          this.barrageList = [];
          
          // 分批次添加弹幕，减少一次性渲染压力
          const batchSize = 10; // 每批10条
          const addBatch = (startIndex) => {
            const endIndex = Math.min(startIndex + batchSize, tempList.length);
            const batch = tempList.slice(startIndex, endIndex);
            this.barrageList.push(...batch);
            
            if (endIndex < tempList.length) {
              setTimeout(() => addBatch(endIndex), 300);
            }
          };
          
          addBatch(0);
        }
      }, 300);
    });
  },
  methods: {
    /**
     * 添加留言
     */
    addToList() {
      if (this.count) {
        this.$message.error("30秒后才能再次留言");
        return false;
      }
      if (this.content.trim() === "") {

        this.$message.error("留言不能为空");
        return false;
      }
      var message = {
        avatar: this.user ? this.user.avatar : this.$store.state.webSiteInfo.touristAvatar,
        status: 1,
        nickname: this.user ? this.user.nickname : "游客",
        content: this.content
      };

      this.content = "";
      addMessageApi(message).then(res => {
        this.barrageList.push(message);
        this.$message.success("留言成功");
      }).catch(err => {
        this.$message.error("留言失败");
      });
      const TIME_COUNT = 30;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 30) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    /**
     * 获取留言列表
     */
    /* listMessage() {
      getMessagesApi().then(res => {
        // this.barrageList = res.data;
        if (res.data && res.data.length > 0) {
          // 先清空列表，然后重新添加
          this.barrageList = [];
          this.$nextTick(() => {
            this.barrageList = res.data;
            // 确保弹幕组件刷新
            if (this.$refs.danmaku) {
              // 检查是否有restart方法
              if (typeof this.$refs.danmaku.restart === 'function') {
                this.$refs.danmaku.restart();
              } else {
                console.log('弹幕组件没有restart方法');
                // 尝试其他方法刷新弹幕
                this.$refs.danmaku.$forceUpdate();
              }
            } else {
              console.log('弹幕组件引用不存在');
            }
          });
        } else {
          console.log('没有获取到弹幕数据');
        }
      }).catch(err => {
        console.error('获取弹幕数据失败', err);
      });
    } */
    listMessage() {
      getMessagesApi().then(res => {
        if (res.data && res.data.length > 0) {
          // 优化数据处理
          const processedData = res.data.map(item => {
            // 预处理数据，确保所有必要字段都存在
            return {
              ...item,
              avatar: item.avatar || this.$store.state.webSiteInfo.touristAvatar,
              nickname: item.nickname || "游客"
            };
          });
          
          // 限制最大弹幕数量，避免过多弹幕导致性能问题
          this.barrageList = processedData.slice(0, 50);
          
          this.$nextTick(() => {
            if (this.$refs.danmaku) {
              // 使用requestAnimationFrame优化渲染
              requestAnimationFrame(() => {
                if (typeof this.$refs.danmaku.restart === 'function') {
                  this.$refs.danmaku.restart();
                } else {
                  this.$refs.danmaku.$forceUpdate();
                }
              });
            }
          });
        } else {
          console.log('没有获取到弹幕数据');
        }
      }).catch(err => {
        console.error('获取弹幕数据失败', err);
      });
    }
  },
  computed: {
    cover() {
      // var cover = "@/assets/images/king-backgd.jpg";
      // return "background: url(" + cover + ") center center / cover no-repeat";
      /* return {
        background: `url(${backgroundImage}) center center / cover no-repeat`
      } */
     // 判断当前是否为黑夜模式
      const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
      
      if (isDarkMode) {
        // 黑夜模式下使用深色背景
        return {
          background: `linear-gradient(rgba(16, 23, 42, 0.8), rgba(23, 36, 64, 0.8)), url(${backgroundImage}) center center / cover no-repeat fixed`
        }
      } else {
        // 白天模式使用原图-->弹幕不太流畅不好
        // 白天模式也添加遮罩，但使用更透明的颜色
        return {
          background: `linear-gradient(rgba(255, 255, 255, 0.4), rgba(100, 181, 246, 0.5)), url(${backgroundImage}) center center / cover no-repeat fixed`
          // background: `url(${backgroundImage}) center center / cover no-repeat fixed`
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>

:deep(.el-input__inner) {
  border-radius: 50px;
  opacity: .9;  // 增加不透明度
  background-color: rgba(255, 255, 255, 0.7);  // 半透明白色背景
  // color: #fff;  // 输入文字为白色
  color: #333 !important;  // 强制使用深色文字
  border: 1px solid rgba(255, 255, 255, 0.7);  // 边框更明显
  font-weight: 500;  // 加粗文字
  
  &::placeholder {
    // color: rgba(255, 255, 255, 0.8);  // 占位符文字颜色
    color: rgba(0, 0, 0, 0.7);  // 深色占位符
  }
}
:deep(.vue-danmaku) {
  z-index: 20 !important;
  position: relative !important;
  will-change: transform; /* 优化动画性能 */
  transform: translateZ(0); /* 启用GPU加速 */
  overflow: hidden; /* 防止溢出 */
  contain: content; /* 添加内容隔离，提高性能 */
}

:deep(.vue-danmaku-item) {
  z-index: 30 !important;
  will-change: transform; /* 优化动画性能 */
  transform: translateZ(0); /* 启用GPU加速 */
  transition: opacity 0.3s ease; /* 平滑过渡 */
  contain: layout; /* 添加布局隔离，提高性能 */
  backface-visibility: hidden; /* 防止3D变换导致的闪烁 */
  perspective: 1000px; /* 提高3D性能 */
}
.message-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $primary;
  // animation: header-effect 1s;
  animation: fadeIn 1.5s ease-out; // 添加渐入动画
  overflow: hidden;  // 防止模糊效果溢出

  // 调整背景图片以适应整个页面
  &::before {
    content: '';
    position: absolute;
    // top: 0;
    // left: 0;
    // right: 0;
    // bottom: 0;
    top: -10px;  // 扩展边缘防止模糊时出现白边
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: inherit;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    // 添加磨砂玻璃效果
    filter: blur(3px);  // 增加模糊效果
    background-color: rgba(64, 158, 255, 0.15);  // 使用蓝色作为遮罩
    z-index: 0;
    
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: saturate(120%);
    -webkit-backdrop-filter: saturate(120%);
    background-color: rgba(64, 158, 255, 0.15);
    z-index: 1;
  }


  .message-container {
    // position: absolute;
    position: relative;
    z-index: 2;
    width: 360px;
    top: 35%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 5;
    margin: 0 auto;
    color: #fff;

    .message-title {
      color: #fff;  // 更亮的白色
      // color: #eee;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);  // 添加文字阴影
      font-weight: 600;
      animation: title-scale 1s;
    }

    .message-input-wrapper {
      display: flex;
      justify-content: center;
      height: 2.5rem;
      margin-top: 2rem;

      .ml-3 {
        opacity: .9 !important;  // 增加按钮不透明度
        background-color: rgba(64, 158, 255, 0.8);  // 使用主题蓝色
        border-color: transparent;
        color: white;
        animation: left-in 1s ease;

        &:hover {
          background-color: rgba(64, 158, 255, 1);  // 悬停时完全不透明
          transform: translateY(-2px);
        }

        @keyframes left-in {
          0% {
            transform: translateY(-500%);
          }

          100% {
            transform: translateX(0);
          }
        }
      }
    }
  }

  .barrage-container {
    // position: absolute;
    // position: relative;
    // z-index: 20;
    position: absolute !important;
    z-index: 999 !important;  // 使用非常高的值
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;  // 防止溢出
    // 添加弹幕容器动画
    animation: slideUp 1s ease 0.5s both;
    pointer-events: none;  // 防止弹幕阻挡点击

    // 添加弹幕项的磨砂玻璃效果
    .barrage-items {
      // background: #000;
      // background: rgba(0, 0, 0, 0.6) !important;
      background: rgba(64, 158, 255, 0.5) !important;  // 使用蓝色作为背景
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
      border-radius: 100px;
      color: #fff;
      padding: 5px 10px 5px 5px;
      align-items: center;
      display: flex;
      margin-top: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);  // 添加阴影
      z-index: 1000 !important;
      visibility: visible !important;
      opacity: 1 !important;
      transition: transform 0.3s ease;
      will-change: transform; /* 优化动画性能 */
      transform: translateZ(0); /* 启用GPU加速 */

      &:hover {
        transform: translateY(-2px);  // 悬停效果
      }
      
      img {
        border: 2px solid rgba(255, 255, 255, 0.5);  // 头像边框
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        will-change: transform; /* 优化动画性能 */
        flex-shrink: 0; /* 防止图片被压缩 */
        margin-right: 4px; /* 添加右边距 */
      }
    }
  }
}

// 添加动画效果
@keyframes title-scale {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

// 添加渐入动画
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
// 深色模式下的输入框样式 - 提高选择器优先级
:root[data-theme='dark'] {
  :deep(.el-input__inner) {
    background-color: rgba(30, 64, 175, 0.5);  // 更明显的背景
    // color: #fff;  // 白色文字
    color: #ffffff !important;  // 使用纯白色
    // color: rgba(255, 255, 255, 0.95) !important;  // 增加文字亮度
    border-color: rgba(255, 255, 255, 0.6);
    font-weight: 600;  // 加粗文字
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.3);  // 添加文字阴影增强可见性
    
    &::placeholder {
      // color: rgba(255, 255, 255, 0.9);  // 更明显的占位符
      color: rgba(255, 255, 255, 1);  // 使用完全不透明的白色
      font-weight: 500;  // 占位符保持正常粗细
      text-shadow: 0 0 2px rgba(255, 255, 255, 0.3);  // 添加轻微文字阴影增加可读性
    }

    &:hover, &:focus {
      background-color: rgba(30, 64, 175, 0.6);  // 悬停和聚焦时稍微加深背景
      border-color: rgba(255, 255, 255, 0.8);  // 增加边框亮度
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);  // 添加发光效果
    }
  }

  .message-banner {
    .message-input-wrapper {
      :deep(.el-input) {
        .el-input__inner {
          background-color: rgba(30, 64, 175, 0.4) !important; // 降低背景不透明度
          color: #ffffff !important; // 纯白色文字
          border-color: rgba(255, 255, 255, 0.7) !important; // 增加边框亮度
          font-weight: 600 !important; // 加粗文字
          text-shadow: 0 0 3px rgba(255, 255, 255, 0.4) !important; // 增强文字阴影
          caret-color: #ffffff !important; // 光标颜色设为白色
          
          &::placeholder {
            color: rgba(255, 255, 255, 1) !important; // 纯白色占位符
            font-weight: 500 !important;
            text-shadow: 0 0 3px rgba(255, 255, 255, 0.4) !important;
            opacity: 0.9 !important; // 稍微降低占位符不透明度
          }
        }
      }
      
      // 确保发送按钮也有合适的样式
      .ml-3 {
        background-color: rgba(64, 158, 255, 0.9) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
      }
    }
  }
  
}


</style>